<template>
	<view class="page">
		<image class="header-bg" :src="common.apiHost+'weappImg/bg_02.png'" mode="widthFix"></image>
		<view class="content-20">
		<view class="time-select">
			<view @click="setCurrentDay(item)" :class="item.day === currentDay.day?'select-item select-item-active':'select-item'" v-for="item in dateArr" :key='item.day'>
				<view class="select-date">{{item.month}}-{{item.day}}</view>
				<view class="select-week">{{item.week}}</view>
			</view>
		</view>
		
		<view class="doctor-list">
			<view class="doctor-item" v-for="item in items" :key='item.id'>
				<view class="doctor-info">
					<image class="doctor-avatar" :src="item.avatar | avatar" mode=""></image>
					<view class="doctor-pos">
						<view class="doctor-name">
							<text>{{item.fullName}}</text>
							<text class="desc">({{item.postTitle}})</text>
						</view>
						<view class="doctor-desc">{{item.briefIntroduction}}</view>
					</view>
				</view>
				<view class="doctor-op" >
					<view class="doctor-date">就诊日期： <text class="tt">{{currentDay.month}}-{{currentDay.day}}({{currentDay.week}})</text></view>
					<view class="btn doctor-reg" @click="register2(item)">点击挂号</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return{
				common,
				items: [],
				dateArr: [],
				currentDay: {}
			}
		},
		
		onShow() {
			let now = new Date()
			this.currentDay = {
				year: now.getFullYear(),
				month: (now.getMonth() + 1).toString().padStart(2, 0),
				day: (now.getDate()).toString().padStart(2, 0),
				// week: `周${this.numberToText(now.getDay())}`
				week: `今天`
			}
			this.getOnLineDoctorList()
			this.getDateArr()
		},
		
		methods: {
			getOnLineDoctorList() {
				api.getOnLineDoctorList({}, res => {
					this.items = res
				})
			},
			
			// 获取可选择的时间
			getDateArr() {
				let temp = []
				for (let i = 0; i < 7; i++) {
					temp.push(this.getlaterTime(i))
				}
				this.dateArr = temp
			},
			
			setCurrentDay(item) {
				this.currentDay = item
			},
			
			// 挂号按钮
			register2(doctorItem) {
				let date = `${this.currentDay.year}-${this.currentDay.month}-${this.currentDay.day}`
				this.$link(`/pagesMain/register/registerStep2?doctorId=${doctorItem.id}&selectDate=${date}&selectWeek=${this.currentDay.week}`)
			},
			
			// 获取加n天后的时间
			getlaterTime(n) {
				n = n || 0
				let now = new Date()
				now = now.setDate(now.getDate() + n)
				now = new Date(now)
				let week = `周${this.numberToText(now.getDay())}`
				if(n === 0) {
					week = '今天'
				}
				return {
					year: now.getFullYear(),
					month: (now.getMonth() + 1).toString().padStart(2, 0),
					day: (now.getDate()).toString().padStart(2, 0),
					week
				}
			},
			
			numberToText(number) {
				switch(number) {
					case 1: { return '一'; break }
					case 2: { return '二'; break }
					case 3: { return '三'; break }
					case 4: { return '四'; break }
					case 5: { return '五'; break }
					case 6: { return '六'; break }
					case 0: { return '天'; break }
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './doctorList.scss';
	.header-bg{
		width: 100%;
	}
	
	.time-select{
		@include flex-base;
	
	}
	.select-item{
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		border: 1px solid #fff;
		padding-top: 12upx;
		    box-sizing: border-box;
			margin-right: 10upx;
	}
	.select-item-active{
		border: 1px solid $theme-color;
		background-color: #cdffe7;
		.select-date,.select-week{
			color: $theme-color;
			font-weight: bold;
		}
	}
	.select-date,.select-week{
		font-size: $font-size-28;
		text-align: center;
	}
	.doctor-item{
		margin-bottom: 20upx;
	}
</style>
